<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useBlog, useTags, GetBlogUrl } from "~/api/blog";
import { QueryPage } from "~/api/query";
import type { Blog } from "~/types";
import { useAppStore } from "~/store/appStore";
const AppStore = useAppStore();
const query = reactive(new QueryPage(1, 20));
const queryUrl = computed(() => {
  return `${GetBlogUrl}?${query.queryUrl}`;
});
const { data: listData, error, pending, refresh } = await useBlog(queryUrl);
const { data: tagsData } = await useTags();
const cacheList = ref(new Array<Blog>());
const blogList = computed(() => {
  const { list } = listData?.value?.data ?? {};
  return [...cacheList.value, ...(list ?? [])];
});
let load = false;
function nextPage() {
  if (!load) return;
  if (!query.hasNext || process.server) {
    return;
  }
  const { list } = listData?.value?.data ?? {};
  cacheList.value.push(...(list ?? []));
  query.nextPage();
  refresh();
}
let TAGS = undefined as string | undefined;
function tagChange(tags: string) {
  TAGS = tags;
  cacheList.value = [];
  query.setParam("tags", tags);
  query.reset();
}
const searchKey = ref("");
function search() {
  cacheList.value = [];
  query.setParam("title", searchKey.value);
  query.setParam("desc", searchKey.value);
  query.setParam("tags", TAGS);
  query.reset();
}
useHead({
  title: "雪貂神社-笔记列表",
  meta: [
    {
      name: "description",
      content: "雪貂神社笔记列表",
    },
    {
      name: "keywords",
      content: "雪貂神社,雪貂,博客," + tagsData.value?.data?.join(","),
    },
  ],
});
onMounted(() => {
  setTimeout(() => {
    load = true;
  }, 500);
});
watch(
  listData,
  () => {
    const { data } = listData.value ?? {};
    if (data) query.update = data;
  },
  {
    immediate: true,
  }
);
</script>

<template>
  <div class="blogBody">
    <header
      style="transition: transform 0.3s"
      :style="{
        transform: AppStore.showDetails ? 'translateY(-100%)' : 'translateY(0)',
      }"
    >
      <ClientOnly>
        <var-input
          v-model="searchKey"
          placeholder="Search..."
          variant="outlined"
          size="small"
          style="min-width: 150px; margin-right: 0.5em"
          @keyup.enter="search()"
        >
          <template #prepend-icon>
            <Icon
              style="font-size: 0.95em; margin-right: 0.2em"
              icon="solar:card-search-broken"
            />
          </template>
        </var-input>
      </ClientOnly>
      <Tags
        class="tags"
        :data="tagsData?.data"
        @change="tagChange"
        :is-edit="false"
      ></Tags>
    </header>
    <var-list
      class="container"
      :loading="pending"
      :error="!!error"
      :finished="!query.hasNext"
      @load="nextPage()"
    >
      <template
        v-for="item in blogList"
        :key="item.id"
      >
        <ArticalItemShare :data="item"></ArticalItemShare>
      </template>
    </var-list>
  </div>
</template>

<style lang="less" scoped>
.blogBody {
  position: relative;
  height: 100vh;
  overflow: auto;
  border-radius: 0.5em 0 0 0;
  background-color: var(--color-body);
  header {
    position: sticky;
    top: 0;
    background-color: var(--color-body);
    padding: 1em;
    z-index: 3;
    display: flex;
    justify-content: space-evenly;
    .tags {
      max-width: 50em;
    }
    h1 {
      margin: 0;
    }
    box-shadow: 0 0.5em 1em 0 rgb(0 0 0 / 0.05);
  }
  .container {
    column-gap: 2em;
    padding: 1em;
    overflow-x: hidden;
    overflow-y: auto;
    column-count: 2;
    position: static;
    @media not screen and (min-width: 900px) {
      column-count: 1;
    }
    & > * {
      break-inside: avoid;
      margin-bottom: 2em;
    }
  }
}
</style>
